// 引入 react 依赖
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Text, View, Image, TouchableOpacity, ImageBackground, ScrollView } from 'react-native';

// 引入第三方依赖
import _ from 'lodash';
import pureRender from 'pure-render-decorator';
import Icon from 'react-native-vector-icons/dist/Ionicons';
import { Actions } from 'react-native-router-flux';
import * as ActionTypes from '../../constants/constants.js'
import FontAwesome from 'react-native-vector-icons/FontAwesome';

// antd 按需加载
import { Tabs, Toast } from '@ant-design/react-native';

// 引入 处理数据 所需文件
import { category } from './module/module.js'

// 引入样式
import Style from './style/style.js';

// 引入公用组件
import { Status, NavBar } from '../../components/index.js'

// 引入专用组件
import { } from './components'

// 引入工具包
import { press, size, ScreenWidth, ScreenHeight, getHeaderHeight, } from '../../util/utils.js'

class Category extends Component {

  constructor(props) {
    super(props)
    this.state = {
      active: 0,
      // refreshing: false,
      // searchBackgroundColor: 'transparent',
      // searchBackgroundColor: '#e43130',
    }
    this.category = category.bind(this)
  }

  componentDidMount() {
    const { category } = this.props
    // InteractionManager.runAfterInteractions(() => {
    // ...耗时较长的同步执行的任务...
    this.category()
    // });
  }

  changeActive(active) {
    this.setState({ active })
  }

  pushActive(category) {
    const { dispatch } = this.props
    dispatch({
      type: ActionTypes.categoryDetails,
      data: category
    })
    Actions.spot()
  }

  render() {
    const { active } = this.state
    const { category } = this.props
    return (
      <View style={Style.container}>
        <Status />
        <View style={{
          flexDirection: 'row',
          alignItems: 'center',
          justifyContent: 'space-between',
          backgroundColor: '#fff',
          borderBottomWidth: 1,
          borderStyle: 'solid',
          borderBottomColor: '#e5e5e5'
        }}>
          <TouchableOpacity
            style={{
              width: 44,
              height: 44,
              alignItems: 'center',
              justifyContent: 'center',
            }}
            onPress={() => {

              Actions.pop()
            }}
          >
            <Icon name="md-arrow-back" size={22} color="#232326" />
          </TouchableOpacity>
          <TouchableOpacity
            style={{
              flex: 1,
              height: 30,
            }}
            onPress={() => {
              Actions.search()
            }}
          >
            <View
              style={{
                paddingVertical: 0,
                paddingHorizontal: 15,
                borderRadius: 15,
                height: 30,
                backgroundColor: '#fff',
              }}
            >
              <Text style={{ fontSize: 12, color: '#232326', lineHeight: 30, }}>请输入商品信息[书名/ISBN/作者/出版社]</Text>
            </View>
          </TouchableOpacity>
          <TouchableOpacity
            style={{
              width: 44,
              height: 44,
              alignItems: 'center',
              justifyContent: 'center',
            }}
            onPress={() => {
              Actions.shoppingCart()
            }}
          >
            <FontAwesome name="shopping-cart" size={22} color="#232326" />
          </TouchableOpacity>
        </View>
        <View style={{
          flex: 1,
          flexDirection: 'row',
          alignItems: 'flex-start',
        }}>
          <ScrollView style={{
            height: ScreenHeight - getHeaderHeight() - 49,
            width: 85,
            backgroundColor: '#f8f8f8',
            borderRightWidth: 1,
            borderStyle: 'solid',
            borderRightColor: '#f8f8f8'
          }}>
            {category.map((item, index) => {
              return (
                <TouchableOpacity
                  key={index}
                  onPress={() => {
                    this.changeActive(index)
                  }}
                  style={[{
                    height: 46,
                    paddingHorizontal: 5
                  },
                  active == index ?
                    {
                      backgroundColor: '#fff'
                    } :
                    {
                      backgroundColor: 'transparent'
                    }
                  ]}>
                  <Text
                    numberOfLines={1}
                    style={[
                      {
                        fontSize: 14,
                        color: '#61676F',
                        textAlign: 'center',
                        lineHeight: 46,
                      },
                      active == index ?
                        {
                          color: '#e93b3d'
                        } :
                        {
                          color: '#333'
                        }
                    ]}>{item.name}</Text>
                </TouchableOpacity>
              )
            })}
          </ScrollView>
          <ScrollView
            style={{
              height: ScreenHeight - getHeaderHeight() - 49,
              width: ScreenWidth - 85,
            }}
          >
            <View
              style={{
                flexDirection: 'row',
                alignItems: 'center',
                flexWrap: 'wrap'
              }}
            >
              {category[active] && category[active].children.map((item, index) => {
                return (
                  <TouchableOpacity
                    key={index}
                    onPress={() => {
                      if (category[active].mold == 3) {
                        Actions.purchasing()
                      } else if (category[active].mold == 4) {
                        Actions.magazine()
                      } else {
                        this.pushActive(item)
                      }
                    }}
                    style={[
                      {
                        width: (ScreenWidth - 85) / 3,
                        height: 36,
                        paddingHorizontal: 5
                      }
                    ]}
                  >
                    <Text
                      numberOfLines={1}
                      style={[
                        {
                          fontSize: 14,
                          color: '#61676F',
                          textAlign: 'center',
                          lineHeight: 36,
                        }
                      ]}>{item.name || item.title}</Text>
                  </TouchableOpacity>
                )
              })}
            </View>
          </ScrollView>
        </View>
      </View >
    );
  }
}


export default connect(({ category }) => ({
  category,
}))(pureRender(Category))
